<template>
	
	     <div class="classdetailContainerTrial" v-if="classInfo">
			     	<el-dialog	
					  :visible.sync="isShow"	
					  :close-on-click-modal="modalclose"
					  custom-class="el-dialog-bg"
					  :before-close="handleClose">
					  <div slot="title" class="panel_title">{{classInfo.className}}</div>
					  <div class="classdetail">
					  	<div class="dialog">
						  	<el-row>
						  		<!-- <el-col :span="8">
						  			<span class="spanlabel">课时进度：</span>
						  			<span class="spanlabelweight">{{classInfo.useCourseHour||0}}/{{classInfo.totalCourseHour||0}}</span>
						  		</el-col> -->
						  		<el-col :span="8">
						  			<span class="spanlabel">试听状态：</span>
						  			<span class="spanlabelweight">{{classInfo.attendModeName}}</span>
						  		</el-col>
						  		<el-col :span="8">
						  			<span class="spanlabel">创建日期：</span>
						  			<span class="spanlabelweight">{{classInfo.createTime?classInfo.createTime.split(' ')[0]:classInfo.createTime}}</span>
						  		</el-col>
						  	</el-row>
						  	<div class="classtitle"><span class="spanlabel">班级基本信息</span></div>
						  	<el-row style="margin-top:.1rem;">
						  		<el-col :span="6">
						  			<span class="spanlabel">课程名称：</span>
						  			<span class="spanlabelweight">{{classInfo.courseName}}</span>
						  		</el-col>
						  		<el-col :span="6">
						  			<span class="spanlabel">科目：</span>
						  			<span class="spanlabelweight">{{classInfo.subjectName}}</span>
						  		</el-col>
						  		<el-col :span="6">
						  			<span class="spanlabel">课程类型：</span>
						  			<span class="spanlabelweight">{{classInfo.courseTypeName}}</span>
						  		</el-col>
						  		<el-col :span="6">
						  			<span class="spanlabel">授课模式：</span>
						  			<span class="spanlabelweight" v-if="classInfo.courseMode==1">小班</span>
						  			<span class="spanlabelweight" v-else-if="classInfo.courseMode==2">中班</span>
						  			<span class="spanlabelweight" v-else-if="classInfo.courseMode==3">大班</span>
						  		</el-col>
						  	</el-row>
						    <el-row style="margin-top:.1rem;">
						    	<span class="spanlabel">上课时间：</span>
						    	<span class="spanlabelweight">{{classInfo.startTime}}</span>-
						    	<span class="spanlabelweight">{{classInfo.endTime}}</span>
						    	<!-- <br />
						    	<div >									    	
							    	<span class="spanlabelweight" v-for="item in classInfo.classSyllabusTime">
							    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	                   	     			{{item}}<br>
	                   	     		</span>
						    	</div>						   
						    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
								<!-- <span class="spanlabel">教师：</span><span class="spanlabelweight">{{classInfo.teacherUserName}}</span>
								<span class="spanlabel">助教：</span><span class="spanlabelweight">{{classInfo.assisUserName}}</span>
								<span class="spanlabel">教室：</span><span class="spanlabelweight">{{classInfo.classRoomName}}</span><br /> -->
								
						    </el-row>
						    <!-- <el-row style="margin-top:.1rem;">
						    	<span class="spanlabel">每次扣课时：</span><span class="spanlabelweight">{{classInfo.oneCourseHour}}</span>
						    </el-row> -->
						    <div class="line"></div>	
						    <el-row>
					    	<div class="studentinfotitle">
					    		<span class="spanlabel">学员信息</span>
					    		&nbsp;&nbsp;&nbsp;
					    		<span class="spanlabelweight">{{classInfo.studentNum||0}}/{{classInfo.recruitNum||0}}</span>				    		
					    		<span class="spanlabel">(现有学员/计划招生)</span>
					    	</div>
					    	<div class="studentlist">
	    		                	<template>
									    <el-table									      
									       max-height="250"
									      :data="classInfo.studentlist"
									       style="width: 100%">
									      <el-table-column
									        prop="realName"
									        label="学员"		
									       
									       >
									       <template slot-scope="scope">								      
									       		<img src="../../assets/img/common/boy.png" style="width:0.14rem;height:0.18rem;position: absolute;top:0.08rem;" v-if="scope.row.gender==1" />
										       	<img src="../../assets/img/common/girl.png" style="width:0.14rem;height:0.18rem;position: absolute;top:0.08rem;" v-else-if="scope.row.gender==2" />
										       	<span style="padding-left: .2rem;">{{scope.row.realName}}</span>									       									       	
									       </template>
									      </el-table-column>
									      <el-table-column
									        prop="age"
									        label="年龄"	
									        align="center"
									       >
									      </el-table-column>
									      <el-table-column
									        prop="createTime"									        
									        align="center"
									        label="进班日期"									
									        >
									        <template slot-scope="scope">
									        	<label style="min-width:2rem">{{scope.row.createTime?scope.row.createTime.split(' ')[0]:scope.row.createTime}}</label>
									        	
									        </template>
									      </el-table-column>
									      <el-table-column
									        prop="courseTimes"
									        align="center"
									        label="课时"									      
									        >
									        <template slot-scope="scope">
									        	{{scope.row.signinMode==1?1:0}}/{{classInfo.classHour||0}}
									        </template>
									      </el-table-column>
									       <el-table-column
									        prop="siginTimes"
									        label="签到"
									        align="center"
									        >
									         <template slot-scope="scope">
									        	{{scope.row.signinMode==1?1:0}}
									        </template>
									      </el-table-column>
									      <el-table-column
									        prop="leaveTimes"
									        label="请假"
									        align="center"
									        >
									        <template slot-scope="scope">
									        	<span>{{scope.row.signinMode==3?1:0}}</span>
									        </template>
									      </el-table-column>
									      <el-table-column
									        prop="makeupTimes"
									        label="补课"
									        align="center"
									        >
									        <template slot-scope="scope">
									        	{{scope.row.signinMode==4?1:0}}
									        </template>
									      </el-table-column>
									      <!-- <el-table-column
									        prop="lateTimes"
									        label="迟到"
									        align="center"
									        >
									        <template slot-scope="scope">
									        	{{scope.row.signinMode==2?1:0}}
									        </template>
									      </el-table-column> -->
									      <el-table-column
									        prop="absentTimes"
									        label="旷课"
									        align="center"
									        >
									        <template slot-scope="scope">
									        	{{scope.row.signinMode==5?1:0}}
									        </template>
									      </el-table-column>
									      <el-table-column
									        prop="studentTuitionMode"
									        label="学员状态"	
									        align="center"
									        >
									        <template slot-scope="scope">
									        	<span>正常</span>
									        </template>
									      </el-table-column>									      
									    </el-table>
				  					</template>
					    	</div>
					    </el-row>
					    </div>
					  </div>
	  
				</el-dialog>
	     </div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	export default{
		data(){
			return{
				modalclose:false,
			}
		},
		methods:{
			handleClose(){
			//    console.log(this.classInfo)
			   this.$store.dispatch('classdetail/hideclassDetailPanelTrial');			   
			}
		},
		computed:{		
    	 ...mapState({                            
					  isShow:state=>state.classdetail.classDetailDialogTrial					
					}),
					
		 ...mapGetters("classdetail",{
		 	         classInfo:"getClassInfoTrial"
		 })
       },
	}
</script>

<style lang="scss">
	@import "@/style/work_platform/utils.scss";
	.classdetailContainerTrial{			
		    .classdetail{
		    	width: inherit;
		    	max-height: 8rem;		    
		    	padding:0 .31rem 0.3rem .31rem;		
		    	.classtitle{
		    		width: inherit;
		    		height: .2rem;
		    		color: #999999;
		    		margin-top:.2rem;
		    		line-height: .2rem;
		    	}
		    	.line{
		    		width: inherit;
		    		height: 1px;
		    		background: $partinglineColor;
		    		margin:.2rem 0 .2rem 0;
		    	}
		    	.studentinfotitle{
		    		width: inherit;
		    		height: .2rem;
		    		line-height: .2rem;
		    	}
		    	.studentlist{
		    		width:inherit;
		    		max-height: 5rem;	
		    			    		
		    	}
		    }
			/**自定义对话框标题样式**/
			.panel_title{				
				padding:.23rem .31rem .23rem .31rem;
				font-size: .22rem;	
			    font-family: "microsoft yahei";
			    color: #333333;		
			}
			/**
			 * 自定义对话框样式
			 */
			.el-dialog-bg{
				background: #FFFFFF;
				width:12rem !important;
				border-radius: .1rem;
				.el-dialog__header{
					padding: 0px;
				}
				.el-dialog__body{
					padding: 0px !important;
				}	
				.el-dialog__footer{
					padding: .3rem;
					.footer-btn{
						width:100%;
						text-align: center;									
				   }
				}		
			}
	}
</style>